<template>
  <div id="GroupAccounts" v-loading="cancelLoading">
    <div class="top_blo">
      <span @click="newgravitational" style="font-size: 25px; cursor: pointer">+</span>
      <span @click="newgravitational" style="font-size: 18px; cursor: pointer">新建合并账套</span>
    </div>
    <div class="GroupAccounts_count">
      <div v-for="item in balanceList" :key="item.groupid" class="Count_Item">
        <div class="Count_edit">
          <span class="subject_top_span">{{ item.groupName }}</span>
          <ul class="subject_top_List">
            <li class="subject_top_item" v-if="jurisdictionControl.enter">
              <!-- <el-popover placement="bottom-end" trigger="hover">
                <ul>
                  <li style="cursor:pointer;padding: 6px;" v-for="ZTs in item.accountList" :key="ZTs.accountid">{{item.accountName}}-{{ZTs.currentYm}}</li>
                </ul>
                <li v-if="jurisdictionControl.enter" slot="reference">
                  <el-button type="primary" @click="Entertheaccount(item.tD_ZC_User_ZTs[0].ZtID,item.tD_ZC_User_ZTs[0].UserID)" round>
                    <i class="iconfont iconsize">&#xe616;</i>
                    <span class="item_span">进入记账</span>
                  </el-button>
                </li>
              </el-popover> -->
              <el-button type="primary" @click="Entertheaccount(item)" round>
                <i class="iconfont iconsize">&#xe616;</i>
                <span class="item_span">进入合并账套</span>
              </el-button>
            </li>
            <li v-if="jurisdictionControl.delete" class="subject_top_item" @click="DeleteAccount(item)">
              <i class="iconfont iconsize">&#xe612;</i>
              <span class="item_span">删除</span>
            </li>
            <li v-if="jurisdictionControl.modification" class="subject_top_item" @click="Editaccountset(item)">
              <i class="iconfont">&#xe606;</i>
              <span class="item_span">编辑</span>
            </li>
            <!-- <li v-if="whether" class="subject_top_item itemradio">
              <span class="item_span">是否显示: </span>
              <el-radio-group v-model="item.IsShow" @change="radioIncident(item.IsShow,item.CustomerID)">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </li> -->
          </ul>
        </div>
        <el-table :data="item.accountList">
          <el-table-column prop="accountCode" align="center" label="账套编码"></el-table-column>
          <el-table-column prop="accountName" align="center" label="账套名称"></el-table-column>
          <!-- <el-table-column  prop="address" align="center" label="持股比例"></el-table-column> -->
        </el-table>
      </div>
    </div>
    <div class="paging">
      <el-pagination :small="true" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="dataParams.pageIndex" :page-sizes="[3, 6, 9]" :page-size="dataParams.pageSize" :pager-count="5" layout="total, sizes, prev, pager, next, jumper" :total="TotalQty" class="pagingChild"></el-pagination>
    </div>
    <!-- 删除弹框 -->
    <delPopup v-if="delPopup.isShow" @delPostConfirm="affirmDelete" :delPopup="delPopup" />
  </div>
</template>
<script>
import { mapState } from "vuex";
import delPopup from "@/components/delPopup";
export default {
  name: "GroupAccounts",
  components: {
    delPopup,
  },
  data() {
    return {
      dataParams: {
        pageIndex: 1, // 默认页码
        pageSize: 3, // 默认列表条数
      },
      balanceList: [], // 账套列表
      TotalQty: 0, // 账套总条数
      TotalPage: "", // 总页
      delPopup: {
        title: "",
        isShow: false,
        type: "",
      },
      cancelLoading: false,
      isConfirmLoading: false,
      jurisdictionControl: {
        // 权限
        modification: false, // 修改
        addition: false, // 添加
        delete: false, // 删除
        enter: false, // 进入记账
      },
      whether: false,
      IsNewgroup: false,
      IsNewgroupname: false,
      input: "",
      multipleSelection: [],
      groupid: "", // 集团id
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
      moduleId: (state) => state.common.moduleId,
      uif: (state) => state.common.uif,
    }),
  },
  methods: {
    newgravitational() {
      // 新建
      if (!this.jurisdictionControl.addition) {
        this.$message({ message: "暂无权限", type: "warning" });
        return;
      }
      this.$router.push({ name: "EditGroupAccount", query: { isEdit: 1, randomNum: Math.floor(Math.random() * 900) + 100 } });
    },

    Editaccountset(row) {
      // 编辑账套
      sessionStorage.setItem("GroupAccounts_row_obj", JSON.stringify(row));
      this.$router.push({ name: "EditGroupAccount", query: { isEdit: 2, row, randomNum: Math.floor(Math.random() * 900) + 100 } });
    },

    Entertheaccount(row) {
      // 进入合并账套
      let params = {
        groupid: row.groupid,
        accountid: row.accountList[0].accountid,
      };
      this.$api.bloc.IntoAccount(params).then((res) => {
        let result = res.data;
        if (result.status == 200) {
          let urlstr = result.data.url;
          // CurrentVersion: "1"
          let ztInfos = [];
          row.accountList.map((item) => {
            ztInfos.push({
              ZTID: item.accountid,
              ZTName: item.accountName,
              CustomerId: item.subid,
            });
          });
          let tokenParams = {
            ZtID: params.accountid,
            userName: this.userInfo.realname,
            companyId: this.userInfo.CompanyId,
            companyNumber: this.userInfo.Serial,
            userId: this.userInfo.UserId,
            sign: result.data.sign,
            ZTGroupId: row.groupid,
            customerId: row.companyid, // 公司id
            accountingSystemId: row.accountingSystemId,
            IsUnify: true,
            uif: this.uif,
            groupName: row.groupName,
            ztInfos,
          };
          console.log(tokenParams, "tokenParams");
          urlstr += this.setUrlParam("tokenParams", escape(JSON.stringify(tokenParams)));
          window.open(urlstr);
        }
      });
    },

    setUrlParam(name, value) {
      var Days = 30;
      var exp = new Date();
      exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); //.91yikuaiji.com
      return "?" + name + "=" + value + "&expires=" + exp.toGMTString() + "&path=/";
    },

    GetbooksList() {
      // 获取账套列表
      this.cancelLoading = true;
      this.$api.bloc.GetGroupPageList(this.dataParams).then((res) => {
        let result = res.data.data;
        if (result.status == 200) {
          this.balanceList = result.items;
          this.TotalQty = result.totalCount;
        }
        this.cancelLoading = false;
      });
    },

    getJurisdiction() {
      // 获取权限
      if (this.userInfo.isadmin) {
        this.jurisdictionControl = {
          modification: true,
          addition: true,
          delete: true,
          enter: true,
        };
        return;
      }
      let params = {
        id: this.moduleId,
      };
      this.$api.publicApi.GetActionInfo(params).then((res) => {
        let resData = res.data.data;
        if (res.data.status == 200) {
          resData.map((item) => {
            if (item.name === "编辑") {
              this.jurisdictionControl.modification = true;
            }
            if (item.name === "新建") {
              this.jurisdictionControl.addition = true;
            }
            if (item.name === "删除") {
              this.jurisdictionControl.delete = true;
            }
            if (item.name === "进入记账") {
              this.jurisdictionControl.enter = true;
            }
          });
        }
      });
    },

    DeleteAccount(row) {
      this.$confirm("确定要删除此集团账套吗？删除后不可恢复!", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.groupid = row.groupid;
        if (this.userInfo.isadmin) {
          // 管理员直接删除
          this.affirmDelete();
        } else {
          this.delPopup = {
            title: "删除集团账套",
            isShow: true,
            type: "3",
          };
        }
      });
    },

    affirmDelete(data) {
      // 确认删除集团账套
      let params = {
        groupid: this.groupid,
      };
      if (data) {
        params.pwd = data.password;
      }
      this.$api.bloc.DeleteGroup(params).then((res) => {
        if (res.data.status === 200) {
          this.GetbooksList();
          this.delPopup.isShow = false;
          this.$message({ message: "删除成功", type: "success" });
        }
      });
    },

    handleSizeChange(val) {
      this.dataParams.pageSize = val;
      this.GetbooksList();
    },
    handleCurrentChange(val) {
      this.dataParams.pageIndex = val;
      this.GetbooksList();
    },
  },
  created() {
    this.getJurisdiction();
    this.GetbooksList();
  },
  activated() {
    if (this.$route.query.isEdit == true) {
      // 修改或新增成功
      this.GetbooksList();
    }
  },
};
</script>
<style lang="less">
#GroupAccounts {
  padding-left: 0;
  padding-bottom: 0;
  .top_blo {
    height: 50px;
    line-height: 50px;
    width: 88%;
    margin-left: 6%;
    background-color: #f7f8fc;
    box-shadow: 0px 0px 10px #d4dcf0;
    border-radius: 5px;
    text-align: center;
    span {
      display: inline-block;
      color: #5377e4;
      padding-right: 10px;
    }
  }
  .GroupAccounts_count {
    width: 88%;
    min-height: calc(100% - 135px);
    margin-left: 6%;
    .Count_Item {
      margin: 20px 0;
      box-shadow: 0px 0px 10px #d4dcf0;
    }
    .el-table {
      // width: 94%;
      // margin-left: 3%;
      max-height: 240px;
      overflow: auto;
      tr {
        th {
          background-color: #fff;
        }
        // td{
        //   border: none;
        // }
      }
    }
    .Count_edit {
      width: 100%;
      height: 55px;
      background-color: #f7f8fc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .subject_top_span {
        margin-left: 3%;
        font-size: 15px;
        color: #77777a;
        cursor: pointer;
        display: inline-block;
        width: 60%;
        overflow: hidden;
      }
      .subject_top_List {
        width: 30%;
        height: 100%;
        display: inline-block;
        .subject_top_item {
          float: right;
          color: #bfc8d8;
          font-size: 13px;
          line-height: 50px;
          margin-right: 6%;
          cursor: pointer;
          .iconsize {
            font-size: 15px;
          }
          .item_span {
            margin-left: 2px;
          }
        }
        .itemradio {
          margin-right: 4%;
          .el-radio {
            color: #bfc8d8;
            cursor: pointer;
            margin-right: 15px;
          }
          .item_span {
            margin-left: 0;
          }
        }
      }
      .combination {
        height: 65%;
        background-color: #ffffff;
        .subject_bottom_List {
          float: left;
          width: 30%;
          margin-left: 3%;
          li {
            text-align: left;
            span {
              display: inline-block;
              color: #bfc8d8;
            }
            p {
              display: inline-block;
              margin-left: 5px;
              font-size: 13px;
              color: #515255;
            }
          }
          .item {
            margin-top: 20px;
          }
          .item_below {
            margin-top: 8px;
          }
        }
      }
    }
  }
  .paging {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .pagingChild {
      float: right;
      margin-right: 5%;
      .el-pagination__total {
        line-height: 28px;
      }
    }
    .el-select-dropdown__list {
      padding-bottom: 12px;
    }
  }
}
.groupClass {
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__footer {
    border: none;
    .el-button {
      width: 100px;
      text-align: center;
      border-radius: 50px;
    }
  }
  tr th {
    background-color: #fff;
  }
  .el-table-column--selection .cell {
    text-align: center;
  }
}
.groupNameClass {
  .el-dialog__body {
    padding: 0;
    .el-checkbox-group {
      display: inline-block;
      max-height: 435px;
      overflow: auto;
    }
  }
  .el-dialog__footer {
    .el-button {
      width: 100px;
      text-align: center;
      border-radius: 50px;
    }
  }
}
</style>
